<template>
  <a-drawer
    placement="top"
    :closable="false"
    :visible="addVisible"
    height="100%"
    wrapClassName="add-power"
    @close="closeTopDrawer"
    :destroyOnClose="true"
    :headerStyle="{
      background: '#f0f1f5',
      padding: '0 0.2rem 0 0.3rem',
      flexGrow: 0,
    }"
    :bodyStyle="{
      padding: '0.3rem 0 0 0',
      flexGrow: 1,
    }"
    :drawerStyle="{
      display: 'flex',
      flexDirection: 'column',
    }"
  >
    <template #title>
      <div class="head-box">
        <span>添加新票制</span>
        <div class="head-btn">
          <a-button @click="closeTopDrawer">取消</a-button>
          <a-button type="primary" class="save-btn" @click="saveAdd"
            >保存</a-button
          >
        </div>
      </div>
    </template>
    <div class="content-box">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <div class="content-width">
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                label="上传工作票"
                prop="workTicketUrl"
                required
              >
                <a-upload
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :before-upload="uploadCheck"
                  :customRequest="ownUpload"
                >
                  <img
                    v-if="form.workTicketUrl"
                    :src="form.workTicketUrl"
                    class="img-box"
                    alt="avatar"
                  />
                  <div v-else>
                    <div class="ant-upload-text">上传工作票</div>
                  </div>
                </a-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                label="上传操作票"
                prop="operatorTicketUrl"
                required
              >
                <a-upload
                  name="avatar"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  :before-upload="uploadCheck"
                  :customRequest="ownUpload2"
                >
                  <img
                    v-if="form.operatorTicketUrl"
                    :src="form.operatorTicketUrl"
                    class="img-box"
                    alt="avatar"
                  />
                  <div v-else>
                    <div class="ant-upload-text">上传操作票</div>
                  </div>
                </a-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-form-model-item
                label="上传交接记录"
                prop="handoverRecordUrl"
                required
              >
                <a-upload
                  :file-list="fileList"
                  :before-upload="uploadCheck2"
                  :customRequest="ownUpload3"
                  @change="handleChange"
                  :remove="removeFile"
                >
                  <a-button>
                    <a-icon type="upload" /> 点击上传交接记录
                  </a-button>
                </a-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item
                label="上传巡回检查记录"
                prop="patrolRecordUrl"
                required
              >
                <a-upload
                  :file-list="fileList2"
                  :before-upload="uploadCheck2"
                  :customRequest="ownUpload4"
                  @change="handleChange2"
                  :remove="removeFile2"
                >
                  <a-button>
                    <a-icon type="upload" /> 上传巡回检查记录
                  </a-button>
                </a-upload>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <a-col :span="12">
              <a-form-model-item
                label="上传切换轮换记录"
                prop="rotationRecordsUrl"
                required
              >
                <a-upload
                  :file-list="fileList3"
                  :before-upload="uploadCheck2"
                  :customRequest="ownUpload5"
                  @change="handleChange3"
                  :remove="removeFile3"
                >
                  <a-button>
                    <a-icon type="upload" /> 上传切换轮换记录
                  </a-button>
                </a-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </div>
  </a-drawer>
</template>
  <script>
import { voteSaveSingle, upload } from "@/api/operationApi.js";
export default {
  data() {
    return {
      form: {
        workTicketUrl: "",
        operatorTicketUrl: "",
        handoverRecordUrl: "",
        patrolRecordUrl: "",
        rotationRecordsUrl: "",
      },
      rules: {
        workTicketUrl: [
          {
            required: true,
            message: "请上传工作票",
            trigger: ["blur", "change"],
          },
        ],
        operatorTicketUrl: [
          {
            required: true,
            message: "请上传操作票",
            trigger: ["blur", "change"],
          },
        ],
        handoverRecordUrl: [
          {
            required: true,
            message: "请上传交接记录",
            trigger: ["blur", "change"],
          },
        ],
        patrolRecordUrl: [
          {
            required: true,
            message: "请上传巡回检查记录",
            trigger: ["blur", "change"],
          },
        ],
        rotationRecordsUrl: [
          {
            required: true,
            message: "请上传切换轮换记录",
            trigger: ["blur", "change"],
          },
        ],
      },
      fileList: [],
      fileList2: [],
      fileList3: [],
    };
  },
  props: {
    addVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    saveAdd() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.form));
          voteSaveSingle(params).then((res) => {
            this.$message.success("新增票制成功");
            this.$emit("reloadList");
            this.reset();
            this.$emit("update:addVisible", false);
          });
        }
      });
    },
    reset() {
      this.fileList = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.form = {
        workTicketUrl: "",
        operatorTicketUrl: "",
        handoverRecordUrl: "",
        patrolRecordUrl: "",
        rotationRecordsUrl: "",
      };
    },
    closeTopDrawer() {
      this.$emit("update:addVisible", false);
    },
    uploadCheck(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpg";
      if (!isJpgOrPng) {
        this.$message.error("请上传png/jpeg/jpg/gif格式的图片");
      }
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("图片不能超过10M!");
      }
      return isJpgOrPng && isLt2M;
    },
    uploadCheck2(file) {
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error("上传文件不能大于10M");
      }
      return isLt10M;
    },
    ownUpload(options) {
      const formdata = {
        multipartFile: options.file,
      };
      upload(formdata).then((res) => {
        this.form.workTicketUrl = res.data;
        options.onSuccess(res, options.file);
      });
    },
    ownUpload2(options) {
      const formdata = {
        multipartFile: options.file,
      };
      upload(formdata).then((res) => {
        this.form.operatorTicketUrl = res.data;
        options.onSuccess(res, options.file);
      });
    },
    ownUpload3(options) {
      const formdata = {
        multipartFile: options.file,
      };
      upload(formdata).then((res) => {
        this.form.handoverRecordUrl = res.data;
        options.onSuccess(res, options.file);
      });
    },
    handleChange(info) {
      this.fileList = info.fileList;
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name}上传成功`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name}上传失败`);
      }
    },
    removeFile() {
      this.form.handoverRecordUrl = "";
      this.fileList = [];
    },
    ownUpload4(options) {
      const formdata = {
        multipartFile: options.file,
      };
      upload(formdata).then((res) => {
        this.form.patrolRecordUrl = res.data;
        options.onSuccess(res, options.file);
      });
    },
    handleChange2(info) {
      this.fileList2 = info.fileList;
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name}上传成功`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name}上传失败`);
      }
    },
    removeFile2() {
      this.fileList2 = [];
      this.form.patrolRecordUrl = "";
    },
    ownUpload5(options) {
      const formdata = {
        multipartFile: options.file,
      };
      upload(formdata).then((res) => {
        this.form.rotationRecordsUrl = res.data;
        options.onSuccess(res, options.file);
      });
    },
    handleChange3(info) {
      this.fileList3 = info.fileList;
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name}上传成功`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name}上传失败`);
      }
    },
    removeFile3() {
      this.fileList3 = [];
      this.form.rotationRecordsUrl = "";
    },
  },
};
</script>
  <style lang="less" scoped>
.add-power {
  .head-box {
    display: flex;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    span {
      font-size: 20px;
      color: #252b3a;
    }
    .head-btn {
      .ant-btn {
        height: 32px;
        font-size: 12px;
        margin-left: 10px;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    .ant-input {
      height: 32px;
    }
    .ant-form {
      height: 100%;
    }
    .input-width {
      width: 80%;
    }
    .content-width {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      /deep/.ant-form-item {
        margin-bottom: 10px;
        /deep/.ant-form-item-label {
          font-size: 12px;
          label {
            font-size: 14px;
          }
        }
      }
      /deep/.ant-form-explain {
        font-size: 12px;
      }
    }
  }
}
/deep/.img-box {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>